Rails Livereload 搭建

原因是这样，有一个新的项目，前端想要加入livereload，但没搭建成功。另一后端又没搭过，觉得他搭的话，会花费一些时间，索性我我就把它搭了起来。

livereload这种虽然搭建起来没什么难度，但要重头做要看很多东西，比较浪费时间，所以写了这个类似教程的东西，以便节省时间。

简介

livereload配合guard，可以达到改动html，assets文件时，刷新页面的效果（如果改动的是css，样式会自动重新加载），可以说是前端开发的必备工具之一。

1. 加入Gems

# Guard is a command line tool to easily handle events on file system modifications.
# https://github.com/guard/guard
gem 'guard'

# Guard::LiveReload automatically reload your browser when 'view' files are modified.
# https://github.com/guard/guard-livereload
gem 'guard-livereload'

# Bring in livereload.js into handy Rack middleware.
# https://github.com/johnbintz/rack-livereload
gem 'rack-livereload'

2. 编辑Guardfile

• 生成Guardfile
  bundle exec guard init
• 配置livereload，在Guardfile写入如下代码

guard 'livereload' do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser
  }

  rails_view_exts = %w(erb haml slim)

  # file types LiveReload may optimize refresh for
  compiled_exts = extensions.values.uniq
  watch(%r{public/.+\.(#{compiled_exts * '|'})})

  extensions.each do |ext, type|
    watch(%r{
          (?:app|vendor)
          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
           (?<ext>\.#{ext})) # matching extension (must be first encountered)
          (?:\.\w+|$) # other extensions
          }x) do |m|
      path = m[1]
      "/assets/#{path}.#{type}"
    end
  end

  # file needing a full reload of the page anyway
  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{app/controllers/.+\.rb})
  watch(%r{config/locales/.+\.yml})
end

配置 livereload for development env

在config/environments/development.rb加入

# Add Rack::LiveReload to the bottom of the middleware stack with the default options:
config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload

最后测试，打完收工。

References

• guard
• guard-livereload
• rack-livereload